import 'package:cached_network_image/cached_network_image.dart';
import 'package:fish_redux/fish_redux.dart';
import 'package:flutter/material.dart' hide Action;
import 'package:www.znpigai.teacher/global_store/state.dart';
import 'package:www.znpigai.teacher/pay_teacher_page/action.dart';
import 'package:www.znpigai.teacher/utils/pay_dialog.dart';
import 'package:www.znpigai.teacher/utils/util.dart';

import 'state.dart';

Widget buildView(
    PayTeacherState state, Dispatch dispatch, ViewService viewService) {
  void showPayDialog(Dispatch dispatch, BuildContext context) async {
    if (state.buttonText == '初始化失败') {
      Util.alert('请返回重试', context);
      return;
    } else if (state.buttonText == '连接中，请稍候...') {
      Util.alert('请稍候...', context);
      return;
    }

    String result = await showDialog(
      context: context,
      builder: (BuildContext context) {
        // return object of type Dialog
        return PayDialog(state.products, state.purchases);
      },
    );

    if (result != null) {
      dispatch(PayTeacherActionCreator.onPay(result));
    }
  }

  bool isMember() {
    return state.userInfo.containsKey('accountInfo') &&
        (state.userInfo['accountInfo']['validRechargeUser'] ||
            state.userInfo['accountInfo']['validBillingCardUser']);
  }

  String memberString() {
    if (isMember()) {
      String time = state.userInfo['accountInfo']['rechargeExpiryTime'];
      if (time == null || time.isEmpty) {
        time = state.userInfo['accountInfo']['billingCardExpiryDate'] ?? '';
      }
      return "会员到期时间：$time";
    } else {
      return '您还不是会员哦！';
    }
  }

  return Scaffold(
    appBar: AppBar(
      centerTitle: true,
      backgroundColor: Colors.black45,
      elevation: 0,
      title: const Text(
        'VIP会员中心',
      ),
    ),
    body: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Stack(
          children: <Widget>[
            Positioned(
              left: 0,
              right: 0,
              top: 0,
              height: 120,
              child: Container(
                color: Colors.black45,
              ),
            ),
            Padding(
                padding: EdgeInsets.all(8),
                child: Stack(
                  children: <Widget>[
                    Image.asset("assets/images/mine_vip_card_bg.png"),
                    Positioned(
                      top: 10,
                      left: 30,
                      child: Row(
                        children: <Widget>[
                          CachedNetworkImage(
                            width: 60,
                            height: 60,
                            placeholder: (context, url) =>
                                CircularProgressIndicator(),
                            errorWidget: (context, url, error) =>
                                Image.asset("assets/images/user.png"),
                            imageUrl: GlobalState.baseUrl(
                                state.userInfo['headImage']),
                            fit: BoxFit.cover,
                          ),
                          SizedBox(width: 10),
                          Column(
                            mainAxisSize: MainAxisSize.min,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              SizedBox(height: 30),
                              Text(state.userInfo['name'],
                                  style: TextStyle(
                                      color: Colors.black87, fontSize: 18)),
                              SizedBox(height: 6),
                              Text(memberString(),
                                  style: TextStyle(
                                      color: Colors.black87, fontSize: 15)),
                              SizedBox(height: 30),
                            ],
                          ),
                        ],
                      ),
                    ),
                    Positioned(
                      top: 24,
                      right: 0,
                      child: Image.asset(
                        "assets/images/mine_vip_voucher.png",
                        width: 74,
                        height: 22,
                      ),
                    ),
                    Positioned(
                      top: 0,
                      right: 20,
                      bottom: 0,
                      child: Offstage(
                        offstage: isMember(),
                        child: Image.asset(
                          "assets/images/mine_vip_overdue.png",
                          width: 72,
                          height: 55,
                        ),
                      ),
                    ),
                    Positioned(
                      left: 0,
                      right: 0,
                      bottom: 30,
                      child: FlatButton(
                        textColor: Colors.white,
                        padding: const EdgeInsets.all(0.0),
                        child: Container(
                          decoration: const BoxDecoration(
                              gradient: LinearGradient(
                                colors: <Color>[
                                  Colors.black54,
                                  Colors.black54,
                                ],
                              ),
                              borderRadius:
                                  BorderRadius.all(Radius.circular(80.0))),
                          padding: const EdgeInsets.fromLTRB(30, 10, 30, 10),
                          child: Text(state.buttonText,
                              style: TextStyle(color: Colors.yellow)),
                        ),
                        onPressed: () =>
                            showPayDialog(dispatch, viewService.context),
                      ),
                    ),
                  ],
                )),
          ],
        ),
        Padding(
            padding: EdgeInsets.symmetric(horizontal: 16, vertical: 10),
            child: Text(
              'Q:VIP用户与普通用户有什么区别？',
              style: TextStyle(fontSize: 18),
            )),
        Padding(
            padding: EdgeInsets.symmetric(horizontal: 16, vertical: 10),
            child: Text(
              'A：您好，订购我们的会员后，在有效期内，作文批改服务不限次数。',
              style: TextStyle(fontSize: 14),
            )),
        Padding(
            padding: EdgeInsets.symmetric(horizontal: 16, vertical: 10),
            child: Text(
              'B：批改服务包括：总评、段评、精彩处小标签、微建议、写作提升建议、拓展学习。',
              style: TextStyle(fontSize: 14),
            )),
      ],
    ),
  );
}

// ignore: must_be_immutable
//class PayDialog extends Dialog {
//  String _value = 'T_A_MONTH';
//  String _type = 'WeiXin';
//  Dispatch dispatch;
//
//  PayDialog(this.dispatch, {Key key}) : super(key: key);
//
//  Widget itemCard(StateSetter state, String id, String title, String price,
//      String origin, String img) {
//    return Card(
//      elevation: 4,
//      child: GestureDetector(
//          onTap: () {
//            state(() {
//              _value = id;
//            });
//          },
//          child: Container(
//            decoration: new BoxDecoration(
//              border: new Border.all(
//                  color: _value == id ? Colors.orangeAccent : Colors.white54,
//                  width: 2),
//              borderRadius: BorderRadius.circular(4.0),
//            ),
//            child: Stack(
//              children: <Widget>[
//                Positioned(
//                  top: 0,
//                  right: 0,
//                  child: Image.asset(img, width: 40),
//                ),
//                Center(
//                    child: Column(
//                  children: <Widget>[
//                    Text(title, style: TextStyle(fontSize: 12)),
//                    Text(
//                      price,
//                      style:
//                          TextStyle(fontSize: 16, fontWeight: FontWeight.w500),
//                    ),
//                    Text(origin,
//                        style: TextStyle(
//                            fontSize: 11,
//                            decoration: TextDecoration.lineThrough)),
//                  ],
//                )),
//              ],
//            ),
//          )),
//    );
//  }
//
//  @override
//  Widget build(BuildContext context) {
//    return StatefulBuilder(builder: (context, state) {
//      return Material(
//        //创建透明层
//        type: MaterialType.transparency, //透明类型
//        child: new Center(
//          //保证控件居中效果
//          child: Container(
//            margin: EdgeInsets.all(30),
//            decoration: ShapeDecoration(
//              color: Color(0xffffffff),
//              shape: RoundedRectangleBorder(
//                borderRadius: BorderRadius.all(
//                  Radius.circular(16.0),
//                ),
//              ),
//            ),
//            child: new Column(
//              crossAxisAlignment: CrossAxisAlignment.center,
//              mainAxisSize: MainAxisSize.min,
//              children: <Widget>[
//                Container(
//                  decoration: ShapeDecoration(
//                    color: Colors.blue,
//                    shape: RoundedRectangleBorder(
//                      borderRadius: BorderRadius.only(
//                        topLeft: Radius.circular(16),
//                        topRight: Radius.circular(16),
//                      ),
//                    ),
//                  ),
//                  child: Row(
//                    children: <Widget>[
//                      SizedBox(width: 50),
//                      Spacer(),
//                      Text(
//                        '会员充值',
//                        style: TextStyle(fontSize: 16, color: Colors.white),
//                      ),
//                      Spacer(),
//                      IconButton(
//                        iconSize: 20,
//                        padding: EdgeInsets.all(14),
//                        icon: Image.asset("assets/images/close.png"),
//                        onPressed: () => Navigator.of(context).pop(''),
//                      ),
//                    ],
//                  ),
//                ),
//                SizedBox(height: 10),
//                Padding(
//                  padding: EdgeInsets.only(left: 10),
//                  child: Text(
//                    '会员套餐选择',
//                    style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
//                  ),
//                ),
//                Padding(
//                    padding: EdgeInsets.all(10),
//                    child: Column(
//                      children: <Widget>[
//                        Row(
//                          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
//                          children: <Widget>[
//                            Expanded(
//                                child: itemCard(state, 'T_A_WEEK', '周卡', '6元',
//                                    '原价6元', 'assets/images/vip.png')),
//                            Expanded(
//                                child: itemCard(state, 'T_A_MONTH', '月卡', '18元',
//                                    '原价20元', 'assets/images/vip.png')),
//                          ],
//                        ),
//                        SizedBox(height: 10),
//                        Row(
//                          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
//                          children: <Widget>[
//                            Expanded(
//                                child: itemCard(state, 'T_A_QUARTER', '季卡',
//                                    '50元', '原价56元', 'assets/images/vip.png')),
//                            Expanded(
//                                child: itemCard(state, 'T_A_YEAR', '年卡', '198元',
//                                    '原价240元', 'assets/images/vip.png')),
//                          ],
//                        ),
//                      ],
//                    )),
//                Padding(
//                  padding: EdgeInsets.all(15),
//                  child: Text(
//                    // '说明：\n 1.到期前自动扣费，会员延长1个月，可随时取消， 取消后不再自动续费。\n 2.会员后，在有效期内，作文批改服务不限次数。\n 3.批改服务包括：总评、段评、精彩处小标签、微建议、写作提升建议、拓展学习。',
//                    '说明：\n 1.会员后，在有效期内，作文批改服务不限次数。\n 2.批改服务包括：总评、段评、精彩处小标签、微建议、写作提升建议、拓展学习。',
//                    style: TextStyle(fontSize: 12),
//                  ),
//                ),
//                Divider(height: 1),
//                SizedBox(height: 10),
//                FlatButton(
//                  textColor: Colors.white,
//                  padding: const EdgeInsets.all(0.0),
//                  child: Container(
//                    decoration: const BoxDecoration(
//                        gradient: LinearGradient(
//                          colors: <Color>[
//                            Colors.orangeAccent,
//                            Colors.orange,
//                          ],
//                        ),
//                        borderRadius: BorderRadius.all(Radius.circular(80.0))),
//                    padding: const EdgeInsets.fromLTRB(80, 10, 80, 10),
//                    child: const Text('立即支付',
//                        style: TextStyle(color: Colors.white)),
//                  ),
//                  onPressed: () {
//                    Navigator.of(context).pop();
//                    dispatch(PayTeacherActionCreator.onPay(_type, _value));
//                  },
//                ),
//                SizedBox(height: 10),
//              ],
//            ),
//          ),
//        ),
//      );
//    });
//  }
//}
